<script>
    // With the Tauri API npm package:
    import { listen, emit } from "@tauri-apps/api/event";
    import { invoke } from "@tauri-apps/api/tauri";
    import { onMount, onDestroy } from "svelte";
    import { heroStore, getTotalHeroes } from "$lib/js/hero.store";

    let message = "";
    let other_val;
    let payload;
    let page = 0;
    function call_cmd() {
        invoke("my_custom_command", {
            number: 42,
        })
            .then((res) => {
                console.log(
                    `Message: ${res.message}, Other Val: ${res.other_val}`
                );
                message = res.message;
                other_val = res.other_val;
            })
            .catch((e) => console.error(e));
    }

    async function onMessage(value) {
        await heroStore.loadHeroes(page);
        page = page + 1;

        console.log(
            "onMesasge: " +
                JSON.stringify(value) +
                " heroStore=" +
                JSON.stringify($heroStore)
        );
        payload =
            "After Rust Event page=" +
            page +
            " heroStore=" +
            JSON.stringify($heroStore);
    }

    // export let onMessage;
    let unlisten;

    onMount(async () => {
        console.log("onMount called");
        unlisten = await listen("rust-event", onMessage);
    });

    onDestroy(() => {
        console.log("onDestroy called");
        if (unlisten) {
            unlisten();
        }
    });
</script>

<div class="break-after-page" />
<div class="px-4">
    <h1 class="font-bold text-3xl mb-4">Value Line Report page1</h1>
    <p>
        Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
    </p>

    <div class=" p-4">
        <a
            href="https://riffle.systems/essays/prelude/"
            class="underline text-2xl bg-blue-300"
        >
            Building data-centric apps with a reactive relational database
        </a>
    </div>
</div>

<div class="break-after-page" />

<div class="px-4">
    <h1 class="font-bold text-3xl mb-4">Value Line Report page2</h1>

    <div class="p-4 flex flex-col">
        <button
            class="m-2 bg-blue-400 text-white w-3/4 text-2xl"
            on:click={call_cmd}
        >
            1. call rust my_custom_command which will send an event from rust
            backend to notify frontend the changed state!
        </button>

        <span class="p-2 bg-rose-300 text-lg font-bold">
            Event Driven Reactive With Zenoh Embedded!
        </span>
        <span class="bg-blue-300 text-lg m-2">
            Hello World (message:{message}/otherVal:{other_val}) Times
        </span>
        <div class="bg-blue-300 text-lg ">
            <span> event payload={payload}</span>

            <div class="m-2 bg-blue-400 text-white text-2xl flex flex-col">
                <span class="w-full">
                    2. Reactive Svelte Store , Refer to onMessage() which call
                    loadHeros() to refresh heros
                </span>
                {#if $heroStore.isLoading}
                    <span>loading</span>
                {:else}
                    {#each $heroStore.heroes as hero, index}
                        <div class="w-full p-4 overflow-auto flex flex-row">
                            <span class="bg-rose-400 flex-nowrap">{index}:</span
                            >
                            <span class="">{JSON.stringify(hero)}</span>
                        </div>
                    {/each}
                {/if}
            </div>
        </div>
        <div class="flex flex-col">
            <a
                href="https://www.linkedin.com/pulse/from-event-driven-architectures-reactive-systems-denis-baltor/"
                class="text-3xl underline"
            >
                From Event-Driven Architectures to Reactive Systems
            </a>

            <b>## Design Patterns for Event-Driven Systems</b>
            <span>
                We can mix and match the following design patterns when
                implementing Event-Driven Architectures.
            </span>

            <b>### Event Notification</b>
            <div class="flex flex-col">
                <b>
                    **A component/service sends event messages to notify others
                    of a change in its state.**
                </b>

                <span>
                    A key element of event notification is that the producer
                    does not really care much about the response. Often it does
                    not expect any answer at all, or if there must be a
                    response, it would be asynchronous and handled by a
                    different logic flow from the one that sent the event in the
                    first place.
                </span>

                <b>
                    **An event message does not need to carry much data on it,
                    usually just some core information and an address back to
                    the producer to request for more information.**
                </b>

                <span>
                    The consumer gets the core information on the nature of the
                    change and might then query the producer for more
                    information, if need be.
                </span>
            </div>
        </div>
    </div>
</div>

<div class="break-after-page" />

<div class="px-4">
    <h1 class="font-bold text-3xl mb-4">Value Line Report page3</h1>

    <div class="flex items-center justify-center w-full lg:w-1/2 ">
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img
            class="object-cover w-full h-auto rounded-md"
            src="ebbinghaus-curve.png"
            alt="apple watch photo"
        />
    </div>
</div>
